<template>
  <HomeHeader @updateUserID="handleUpdateUserID"></HomeHeader>
  <el-container
    style="height: 100vh; width: 100vw; margin: auto; padding: 20px; background: linear-gradient(to right, #ffecd2, #fcb69f); display: flex; justify-content: center; align-items: center;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>场地预定</span>
      </div>
      <el-form :model="form" label-width="120px">
        <el-form-item label="选择日期">
          <el-date-picker v-model="form.date" type="date" placeholder="选择日期" :picker-options="pickerOptions"
            style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="选择时间段">
          <div class="time-slots">
            <div v-for="item in timeSlots" :key="item.value"
              :class="['time-slot', { selected: form.time === item.value }]" @click="selectTimeSlot(item.value)">
              {{ item.label }}
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm" style="width: 100%;">提交预定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-container>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
import HomeHeader from "@/components/HomeHeader.vue";
import { ElMessageBox } from 'element-plus';
import { useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const form = reactive({
  date: '',
  time: '',
  yard_id: '',
  campusname: '',
  yard_name: '',
  hourrate: '',
  userID: '', 
});

const pickerOptions = {
  disabledDate(time) {
    const today = new Date();
    const sevenDaysLater = new Date();
    sevenDaysLater.setDate(today.getDate() + 7);
    return time.getTime() < today.getTime() || time.getTime() > sevenDaysLater.getTime();
  }
};

const timeSlots = [
  { value: '07:00-08:00', label: '07:00-08:00' },
  { value: '08:00-09:00', label: '08:00-09:00' },
  { value: '09:00-10:00', label: '09:00-10:00' },
  { value: '10:00-11:00', label: '10:00-11:00' },
  { value: '11:00-12:00', label: '11:00-12:00' },
  { value: '12:00-13:00', label: '12:00-13:00' },
  { value: '13:00-14:00', label: '13:00-14:00' },
  { value: '14:00-15:00', label: '14:00-15:00' },
  { value: '15:00-16:00', label: '15:00-16:00' },
  { value: '16:00-17:00', label: '16:00-17:00' },
  { value: '17:00-18:00', label: '17:00-18:00' },
  { value: '18:00-19:00', label: '18:00-19:00' },
  { value: '19:00-20:00', label: '19:00-20:00' },
  { value: '20:00-21:00', label: '20:00-21:00' },
  { value: '21:00-22:00', label: '21:00-22:00' }
];

const selectTimeSlot = (value) => {
  form.time = value;
};

const submitForm = async () => {
  try {
    const response = await axios.post('http://localhost:8000/reserve', {
      yard_id: form.yard_id,
      campusname: form.campusname,
      yard_name: form.yard_name,
      reserve_date: form.date,
      reserve_time: form.time,
      hourrate: form.hourrate,
      userID: form.userID, 
    }, { withCredentials: true });

    if (response.data.code === 0) {
      ElMessageBox.alert('预定成功', '提示', {
        confirmButtonText: 'OK',
      });
      router.push("/");
    } else {
      let errorMessage = '预定失败';
      switch (response.data.msg) {
        case '该时间段已被预定':
          errorMessage = '该时间段已被预定，请选择其他时间。';
          break;
        case '预约日期不能为空':
          errorMessage = '请选择预约日期。';
          break;
        case '预约时间段不能为空':
          errorMessage = '请选择预约时间段。';
          break;
        default:
          errorMessage = '预定失败，请稍后再试。';
      }

      ElMessageBox.alert(errorMessage, '错误', {
        confirmButtonText: 'OK',
      });
    }

  } catch (error) {
    ElMessageBox.alert('服务器错误，请稍后再试。', '错误', {
      confirmButtonText: 'OK',
    });
  }
};

onMounted(() => {
  const yardInfo = route.query;
  form.yard_id = yardInfo.yard_id;
  form.campusname = yardInfo.campusname;
  form.yard_name = yardInfo.yard_name;
  form.hourrate = yardInfo.hourrate;
});

const handleUpdateUserID = (userID) => {
  form.userID = userID; 
};
</script>

<style scoped>
.box-card {
  max-width: 1200px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding-left: 20px;
  padding-top: 100px;
  padding-bottom: 100px;
  padding-right: 20px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.el-button:hover {
  background-color: #f78989;
  border-color: #f78989;
}
.time-slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.time-slot {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}
.time-slot.selected {
  background-color: #f56c6c;
  border-color: #f56c6c;
  color: white;
}
.time-slot:hover {
  background-color: #f78989;
  border-color: #f78989;
}
</style>
